{% extends "base_electric.html" %}

{% block header %}
	<script type="text/javascript" src="{{ STATIC_URL }}js/livedata2.js"></script>
	<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.sparkline.js"></script>
{% endblock %}

{% block content_electric %}
	<h1>Live Data</h1>
    <table class="table table-bordered">
        <tr>
            <th>Electricity</th>
            <td></td>
            <td><span id="FirstTimeBox"></span></td>
            <td><span id="TimeFrame"></span></td>
            <td><span id="currTimeBox"></span></td>
            <td>low</td>
            <td>high</td>
        </tr>
        <tr>
            <th>Real Power</th>
            <th>kW</th>
            <td><span id="kwFirst">0.0</span></td>
            <td><div style="width:360px" id="kwSparkline"></div></td>
            <td><span id="kwBox">0.0</span></td>
            <td><span id="kwMin">0.0</span></td>
            <td><span id="kwMax">0.0</span></td>
        </tr>


        <tr>
            <th>Voltage</th>
            <th>V</th>
            <td><span id="voltFirst">0.0</span></td>
            <td><div  id="vSparkline"></div></td>
            <td><span id="voltBox">0.0</span></td>
            <td><span id="voltMin">0.0</span></td>
            <td><span id="voltMax">0.0</span></td>
        </tr>
        <tr>
            <th>Apparent Power</th>
            <th>kVA</th>
            <td><span id="kvaFirst">0.0</span></td>
            <td><div id="kvaSparkline"></div></td>
            <td><span id="kvaBox">0.0</span></td>
            <td><span id="kvaMin">0.0</span></td>
            <td><span id="kvaMax">0.0</span></td>
        </tr>
        <tr>
            <th>Power Factor</th>
            <td></td>
            <td><span id="pfFirst">0.0</span></td>
            <td><div id="pfSparkline"></div></td>
            <td><span id="pfBox">0.0</span></td>
            <td><span id="pfMin">0.0</span></td>
            <td><span id="pfMax">0.0</span></td>
        </tr>
    </table>
{% endblock %}

